<template>

    <main-layout>
        <div class="home-box">
            <!-- 输入框 -->
            <header>
                    <van-search v-model="value"
                    shape="round"
                    background="#ffffff"
                    placeholder="请输入搜索关键词"
                    />
            </header>
            <!-- 主体 -->
            <div class="content1">
                <!-- 轮播 -->
                <van-swipe :autoplay="3000" >
                    <van-swipe-item v-for="(image, index) in images" :key="index">
                        <img class="banner-img" v-lazy="image" />
                    </van-swipe-item>
               
                </van-swipe>
                <!-- 分类 -->
                <div class="type">
                    <div class="types" v-for="it in typesList" :key="it.icon"
                    @click="gettypes(it)"
                    >
                        <img :src="[it.icon]" alt="">
                        <span>{{it.text}}</span>
                    </div>
                </div>
               

                <div class="hot">
                    <div class="top1">
                        <img src="../../images/eat.png" class="icon">
                        <!-- <van-icon name="chat-o" color="#ee0a24" /> -->
                        <div class="title">猜你喜欢</div>
                        
                    </div>
                    <div class="all">
                        <div class="shop1" v-for="item in hotshopList" :key="item.img"
                        @click="getdetail(item)"
                    >
                        <img :src="item.img" alt="">
                        <div class="text">{{item.title}}</div>
                    </div>
                    </div>
                    

                    <div class="top">
                        <img src="../../images/bell.png" class="icon">
                        <div class="title">今天吃什么</div>
                        
                    </div>
                    <div class="shop" v-for="item in hotshopList" :key="item.img"
                        @click="getdetail(item)"
                    >
                        <img :src="item.img" alt="">
                        <div class="text">{{item.title}}</div>
                    </div>
                    
                    
                </div>

            </div>
        
        </div>
    </main-layout>
</template>

<script>
// 导入模拟服务器
import MockService from '../../mockdata/mockService'
// import MockService from '../../mockdata/MockService11'

    export default {
        data() {
            return {
                value:'',
                images: [
                    require('../../images/banner1.jpeg'),
                    require('../../images/banner2.jpeg'),
                    require('../../images/banner3.png'),
                    require('../../images/banner4.png'),
                ],
                typesList:[
                    {icon:require('../../images/types/icon-1.png'),text:'热门分类'},
                    {icon:require('../../images/types/icon-2.png'),text:'人气菜谱'},
                    {icon:require('../../images/types/icon-3.png'),text:'家常菜谱'},
                    {icon:require('../../images/types/icon-4.png'),text:'中国菜系'},
                    {icon:require('../../images/types/icon-5.png'),text:'各地小吃'},
                    {icon:require('../../images/types/icon-6.png'),text:'食疗养生'},
                    {icon:require('../../images/types/icon-7.png'),text:'水产海鲜'},
                    {icon:require('../../images/types/icon-8.png'),text:'菜谱分类'}
                ],
                hotshopList:[],
            }
        },

        created() {
            this.getList()
        },

        methods: {
            async getList(){
                let result=await MockService.getHotApi();
                // let result=await MockService.getFoodList();
                
                if (result.code===200) {
                    this.hotshopList=result.data.row.map((it) =>{
                    // this.hotshopList=result.data.rows.map((it) =>{
                    // console.log(it);

                        return it
                    })
                        // debugger;

                }
                // this.hotshopList=result.data.row
                console.log(result);
                console.log(this.hotshopList);
            },
            async getdetail(i){
                console.log('i',i);
                let result=await MockService.getHotApi();
                if (result.code===200) {
                    this.hotshopList=result.data.row.map((it) =>{
                        let hotid=it.id
                        if (i.id===it.id) {
                            this.$router.push({
                            path:'/detail',
                            query:{id:it.id}
                        })
                        }
                        console.log(hotid);
                        return it
                    })
                }
            },
            gettypes(item){
                console.log(item);
                this.$router.push({
                    path:'/find',
                    query:{name:item.text}
                })
            }
            
        },
    }
</script>

<style lang="less" scoped>
@import "../../style/common.less";


.home-box{
    display: block;
    height: 100%;

    > header{
        height: 60px;
        width: 100%;
        // position: fixed;
        // top:0;
        // left: 0;
        // z-index: 200;
    }
    > .content1{
        // padding-top: 60px;
        height: calc(100% - 60px);
        .van-swipe {
        display: block;
        height: 210px;
        margin: 0 12px 16px;
        border-radius: 4px;
        background-color: #fff;
        > .van-swipe-item {
            width: 100%;
            
            }
            .banner-img {
                display: block;
                height: 210px;
                max-width: 100%;
                margin: auto;
                }
        }
        > .type{
        display: block;
        height: 190px;
        .types {
            // border: 1px solid #000;
            float: left;
            width: 25%;
            margin: 10px 0px;
            > img {
                width: 50px;
                height: 50px;
                display: block;
                // height: 32px;
                // background-position: center bottom;
                // background-size: 22px;
                // background-repeat: no-repeat;
                margin: 0 auto;
                }
            > span {
                display: block;
                height: 16px;
                text-align: center;
                font-size: 16px;
                margin-top: 5px;
                // color: #545456;
                }
            .clear();
            }
        }
        
        > .hot{
        display: block;
        > .top{
            height: 35px;
            // border: 1px solid #000;
            // float: left;
            margin: 20px;
            .icon{
                color: burlywood;
                width: 30px;
                float: left;
                vertical-align: top;
                .clear();
                }
            .title{
                font-size: 22px;
                color: #000;
                float: left;
                line-height: 34px;
                margin-left: 5px;
                .clear();
                }
         
            }
        > .shop{
            display: block;
            width: 50%;
            float: left;
            // height: 200px;
            padding: 0px 10px;
            > img{
                width: 100%;
                height: 170px;
                vertical-align: top;
                border-radius: 10%;
            }
            > .text{
                font-size: 20px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0px 10px;
                margin: 5px 0px;
            }
        }

        > .top1{
            height: 35px;
            // border: 1px solid #000;
            // float: left;
            margin: 20px;
            .icon{
                width: 30px;
                float: left;
                vertical-align: top;
                .clear();
                }
            .title{
                font-size: 22px;
                color: #000;
                float: left;
                line-height: 34px;
                margin-left: 5px;
                .clear();
                }
         
            }
        > .all{
            display: flex;
            height: 210px;
            overflow-y: hidden;
            overflow-x: scroll;
            > .shop1{
                // display: flex;
                display: block;
                width: 205px;
                padding: 0px 10px;
                // &:hover{
                //     box-shadow: 10px 10px rgba(250, 0, 0, 0.1);
                // }
                > img{
                    width: 192px;
                    height: 170px;
                    vertical-align: top;
                    border-radius: 10%;
                }
                > .text{
                    font-size: 20px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    padding: 0px 10px;
                    margin: 5px 0px;
                }
            }
        }
        
        .clear();
        }
    }   
}

//     .van-swipe {
//         display: block;
//         height: 210px;
//         margin: 0 12px 16px;
//         border-radius: 4px;
//         background-color: #fff;
//         .van-swipe-item {
//             width: 100%;
//         }
//     }
//     .banner-img {
//         display: block;
//         height: 210px;
//         max-width: 100%;
//         margin: auto;
//     }

// .type{
//     display: block;
//     height: 190px;
//     .types {
//         // border: 1px solid #000;
//         float: left;
//         width: 25%;
//         margin: 10px 0px;
//         > img {
//             width: 50px;
//             height: 50px;
//             display: block;
//             // height: 32px;
//             // background-position: center bottom;
//             // background-size: 22px;
//             // background-repeat: no-repeat;
//             margin: 0 auto;
//         }
//         > span {
//             display: block;
//             height: 16px;
//             text-align: center;
//             font-size: 16px;
//             margin-top: 5px;
//             // color: #545456;
//         }
//         .clear();
//     }
// }
    

//     .hot{
//         display: block;
//         > .top{
//             height: 35px;
//             border: 1px solid #000;
//             // float: left;
//             margin: 20px;
//             .icon{
//                 width: 30px;
//                 float: left;
//                 vertical-align: top;
//                 .clear();
//             }
//             .title{
//                 font-size: 22px;
//                 color: #000;
//                 float: left;
//                 line-height: 34px;
//                 margin-left: 5px;
//                 .clear();
//             }
         
//         }
//         > .shop{
//             display: block;
//             width: 50%;
//             float: left;
//             // height: 200px;
//             padding: 0px 10px;
//             > img{
//                 width: 100%;
//                 height: 100px;
//                 vertical-align: top;
//             }
//             > .text{
//                 font-size: 20px;
//                 white-space: nowrap;
//                 overflow: hidden;
//                 text-overflow: ellipsis;
//                 padding: 0px 10px;
//                 margin: 5px 0px;
//             }
//         }
//         .clear();
//     }
</style>
